<template>
  <div class="order_list_1" style="left: 100%;">
    <div class="order_list_header">
      <div class="l">
        <img :src="require('../assets/images/icon/back.png')" class="back"/>
      </div>
      <div class="c">投注单</div>
      <div class="r">1</div>
    </div>
    <div class="list_wrap">
      <img src="" class="list_top"/>
      <div class="list">
        <div class="time">
          <div class="no">第2019231期</div>
          <div class="cd">00:00:53</div>
        </div>
        <div class="tab">
          <div class="bet_message">
            <div class="note">0注</div>
            <div class="total">0元</div>
          </div>
          <div class="clean">清空</div>
        </div>
        <div class="content"></div>
      </div>
      <img src="" class="list_bottom"/>
      <div class="submit">投注</div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "down-bet"
    }
</script>

<style lang="less" scoped>

  .order_list_1{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -webkit-linear-gradient(top,#9067ff 60%,#c278ff);
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;

    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;

    .order_list_header{
      width: 100%;
      height: 80px;
      -ms-flex-pack: justify;
      justify-content: space-between;
      background: transparent;
      color: #fdfdfd;

      .l{
        width: 120px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 40px;
        display: flex;
        -ms-flex-align: center;
        align-items: center;

        .back{
          height: 40px;
          margin: 0;
          padding: 0;
        }
      }

      .c{
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        flex: 1 1;
        font-size: 15px;
      }

      .r{
        width: 120px;
      }
    }

    .list_wrap{
      z-index: 1;
      width: 100%;
      height: 100%;
      -ms-flex: 1 1;
      flex: 1 1;
      margin-top: 40px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-align: center;
      align-items: center;
      position: relative;

      .list_top{
        width: 90%;
        -webkit-transform: translateY(12px);
        -ms-transform: translateY(12px);
        transform: translateY(12px);
      }

      .list{
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 1;
        width: 82%;
        height: 78%;
        overflow: auto;
        background-color: #fff;
        -ms-flex-direction: column;
        flex-direction: column;

        .time{
          width: 100%;
          -ms-flex-pack: justify;
          justify-content: space-between;
          padding: 16px 64px 16px 40px;

          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }

        .tab{
          width: 88%;
          height: 72px;
          border: 1px solid #9067ff;
          border-radius: 12px;
          -ms-flex-pack: justify;
          justify-content: space-between;
          margin-bottom: 40px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding: 0 16px;

          .note{
            font-size: 14px;
          }

          .total{
            font-size: 16px;
          }
        }

        .content{
          width: 85%;
          -ms-flex: 1 1;
          flex: 1 1;
          padding-bottom: 48px;
          overflow: auto;
        }
      }

      .list_bottom{
        margin-top: -2px;
        width: 82%;
      }

      .submit{
        z-index: 1;
        height: 72px;
        width: 240px;
        background: -webkit-linear-gradient(0,#9067ff,#ff78d2);
        color: #fdfdfd;
        font-size: 15px;
        letter-spacing: 2px;
        border-radius: 100px;
        background-color: gray;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        margin: -120px auto 0;
      }
    }

  }
  .order_list_1 .order_list_header, .order_list_1 .order_list_header .l{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
  }

</style>
